<template>
  <div class="container mainCon">
    <div style="position: relative">
      <div class="topTitle boxBorder">
        <span class="blockTitle">
          <i
            class="icon iconfont iconfanhui1"
            v-show="back"
            @click="goBack"
          ></i>
          {{ company.name }}
          <el-tag
            type="success"
            class="tag-item"
            style="background: #5fab2b; border-color: #5fab2b"
            >{{ departmentTypeFun }}</el-tag
          >
        </span>
        <p>
          <span class="code">统一社会信用代码：{{ company.uscc }}</span>
          <span class="code" style="margin-left: 30px"
            >注册地区/归属：{{ company.regAreaName }}，{{
              company.enterpriseBelongs
            }}</span
          >
          <span class="code" style="margin-left: 30px"
            >经营地区：{{ company.bizAreaName }}</span
          >
        </p>
        <p style="margin-top: 10px">
          <span class="code">行业：{{ company.fullIndustryName }}</span>
        </p>
        <div style="position: absolute; right: 24px; top: 40px">
          <el-button
            type="primary"
            class="commonBut saveBtn funComBut"
            @click="editInfo"
            v-show="isUpdate"
            >编辑信息</el-button
          >
        </div>
      </div>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        class="commonTab"
      >
        <el-tab-pane label="基础信息" name="first">
          <employerBaseInfo
            v-if="isShowComponent"
            :company="company"
          ></employerBaseInfo>
        </el-tab-pane>
        <el-tab-pane label="附件信息" name="second">
          <attachmentInfo
            v-if="isShowComponent"
            :company="attachVo"
          ></attachmentInfo>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import employerBaseInfo from './employerBaseInfo'
import attachmentInfo from './attachmentInfo'

export default {
  name: 'employerRecordDetail',
  components: {
    employerBaseInfo,
    attachmentInfo,
  },
  data() {
    return {
      activeName: 'first',
      company: '',
      attachVo: {
        departmentType: '',
        affiltatedCertificateFile: [],
        businessLicenseImgFile: '',
        bossIDCardFrontImgFile: '',
        bossIDCardBackImgFile: '',
        regulationsFiles: [],
        laborDispatchFiles: [],
        unionReplyFiles: [],
        collectiveContractFiles: [],
        salaryAgreementFiles: [],
      },
      companyId: '',
      isUpdate: '',
      back: false,
      routeName: '',
      isShowComponent: false,
      userType: '',
    }
  },
  computed: {
    departmentTypeFun() {
      if (this.company.departmentType == '0') {
        return '企业'
      } else if (this.company.departmentType == '5') {
        return '事业单位'
      } else if (this.company.departmentType == '10') {
        return '其他'
      } else if (this.company.departmentType == '15') {
        return '个体工商户'
      }
    },
  },
  async created() {
    this.companyId = this.$route.query.companyId
    this.routeName = this.$route.query.routeName
    if (this.routeName) {
      this.back = true
    } else {
      this.back = false
    }
    await this.getCompanies()
    this.isShowComponent = true
    this.userType = localStorage.getItem('loginType')
    if (this.userType === 'JC') {
      this.isUpdate =
        this.$store.state.buttonLimitsArr.indexOf('employerRecordList:update') >
          -1 ||
        this.$store.state.buttonLimitsArr.indexOf('employerInfoList:update') >
          -1
    } else {
      this.isUpdate =
        this.$store.state.buttonLimitsArr.indexOf(
          'employerRecordDetail:update'
        ) > -1
    }
  },
  methods: {
    goBack() {
      if (
        this.routeName == 'employerInfoList' ||
        this.routeName == 'constructEmployingUnitDetail'
      ) {
        this.$router.push('/home/enterpriseSet/employerInfoList')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/enterpriseSet/employerInfoList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
      if (this.routeName == 'enterpriseArchives') {
        this.$router.push('/home/businessManagement/enterpriseArchives')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/businessManagement/enterpriseArchives',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    //tabs栏切换
    handleClick(tab, event) {},
    // 监察/单位端编辑跳转
    editInfo() {
      let queryObj = { pageType: 'improve' }
      let commitObj = {
        oldUrl: '/home/enterpriseSet/employerRecordDetail',
        newUrl: this.$router.currentRoute.fullPath,
      }
      if (
        this.$store.state.userType === 'MONITOR' ||
        this.$store.state.userType === 'AREAMANAGE'
      ) {
        queryObj.pageType = 'edit'
        queryObj.uscc = this.company.uscc
        queryObj.routeName = this.routeName
        if (
          this.routeName === 'employerInfoList' ||
          this.routeName === 'constructEmployingUnitDetail'
        ) {
          commitObj.oldUrl = '/home/enterpriseSet/employerInfoList'
        }
        if (this.routeName === 'enterpriseArchives') {
          commitObj.oldUrl = '/home/enterpriseSet/employerRecordList'
        }
      }
      this.$router.push({
        path: '/home/enterpriseSet/ImproveInformation',
        name: 'ImproveInformation',
        query: queryObj,
      })
      this.$store.commit('CHANGE_SLIDER_NAME', commitObj)
    },
    getCompanies() {
      return this.axios({
        method: 'post',
        url: 'api-c/companydetail/expand/companydetail',
        data: {
          id: this.companyId,
          areaId: this.$store.state.areaInfoArr.areaId,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.company = res.data.result
            this.attachVo.departmentType = res.data.result.departmentType + ''
            if (
              res.data.result.businessLicenseImgFile &&
              res.data.result.businessLicenseImgFile.length > 0
            ) {
              this.attachVo.businessLicenseImgFile =
                res.data.result.businessLicenseImgFile[0].url
            }
            if (
              res.data.result.bossIDCardFrontImgFile &&
              res.data.result.bossIDCardFrontImgFile.length > 0
            ) {
              this.attachVo.bossIDCardFrontImgFile =
                res.data.result.bossIDCardFrontImgFile[0].url
            }
            if (
              res.data.result.bossIDCardBackImgFile &&
              res.data.result.bossIDCardBackImgFile.length > 0
            ) {
              this.attachVo.bossIDCardBackImgFile =
                res.data.result.bossIDCardBackImgFile[0].url
            }
            if (
              res.data.result.affiltatedCertificateFile &&
              res.data.result.affiltatedCertificateFile.length > 0
            ) {
              this.attachVo.affiltatedCertificateFile =
                res.data.result.affiltatedCertificateFile[0].url
            }
            this.attachVo.regulationsFiles = res.data.result.regulationsFiles
            this.attachVo.laborDispatchFiles =
              res.data.result.laborDispatchFiles
            this.attachVo.unionReplyFiles = res.data.result.unionReplyFiles
            this.attachVo.collectiveContractFiles =
              res.data.result.collectiveContractFiles
            this.attachVo.salaryAgreementFiles =
              res.data.result.salaryAgreementFiles
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg,
            })
          }
        })
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.topTitle {
  background: #fff;
  padding: 16px 24px;
  position: relative;
  .blockTitle {
    font-weight: bold;
    font-size: 18px;
    color: #333;
    // line-height: 40px;
    .iconfanhui1 {
      font-size: 20px;
      margin-right: 6px;
      cursor: pointer;
    }
  }
  p {
    margin-top: 10px;
  }
  .code {
    font-size: 14px;
    color: #666;
  }
}
.tag-item {
  color: #ffffff !important;
  font-size: 12px;
  border-radius: 0px;
  height: 18px;
  line-height: 18px;
  text-align: center;
}
.mainCon {
  top: 130px;
  padding: 0;
}
</style>
